<template>
  <!-- 样式面板 -->
  <div>
    <q-list separator no-border>
      <q-expansion-item label="布局" default-opened>
        <table class="style-tb">
          <tr>
            <td width="50%">X坐标</td>
            <td width="50%">
              <q-input
                type="number"
                suffix="px"
                v-model.number.lazy="configObject.style.position.x"
                class="suffix"
              />
            </td>
          </tr>
          <tr>
            <td>Y坐标</td>
            <td>
              <q-input
                type="number"
                suffix="px"
                v-model.number.lazy="configObject.style.position.y"
                class="suffix"
              />
            </td>
          </tr>
          <tr>
            <td>宽</td>
            <td>
              <q-input
                type="number"
                suffix="px"
                v-model.number.lazy="configObject.style.position.w"
                class="suffix"
              />
            </td>
          </tr>
          <tr>
            <td>高</td>
            <td>
              <q-input
                type="number"
                suffix="px"
                v-model.number.lazy="configObject.style.position.h"
                class="suffix"
              />
            </td>
          </tr>
        </table>
      </q-expansion-item>

      <q-expansion-item label="边框" default-opened>
        <table>
          <tr>
            <td width="50%">边框宽度</td>
            <td width="50%">
              <q-input
                type="number"
                suffix="px"
                class="suffix"
                v-model.number.lazy="configObject.style.borderWidth"
              />
            </td>
          </tr>
          <tr>
            <td>边框样式</td>
            <td>
              <q-select v-model="configObject.style.borderStyle" :options="borderStyleOptions" />
            </td>
          </tr>
          <tr>
            <td>边框颜色</td>
            <td>
              <q-input filled v-model="configObject.style.borderColor" class="my-input">
                <template v-slot:append>
                  <q-icon name="colorize" class="cursor-pointer">
                    <q-popup-proxy transition-show="scale" transition-hide="scale">
                      <q-color v-model="configObject.style.borderColor" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </td>
          </tr>
        </table>
      </q-expansion-item>

      <q-expansion-item label="外观" default-opened>
        <table>
          <tr>
            <td width="50%">可见性</td>
            <td width="50%">
              <q-select
                v-model="configObject.style.visible"
                :options="[{label: 'Visible',value: true},{label: 'Invisible',value: false}]"
              />
            </td>
          </tr>
          <tr>
            <td>z-index</td>
            <td>
              <q-input type="number" v-model.number.lazy="configObject.style.zIndex" />
            </td>
          </tr>
          <tr>
            <td>X轴旋转</td>
            <td>
              <q-input
                type="number"
                v-model.number.lazy="configObject.style.rotateX"
                suffix="deg"
                class="suffix"
              />
            </td>
          </tr>
          <tr>
            <td>Y轴旋转</td>
            <td>
              <q-input
                type="number"
                v-model.number.lazy="configObject.style.rotateY"
                suffix="deg"
                class="suffix"
              />
            </td>
          </tr>
          <tr>
            <td>Z轴旋转</td>
            <td>
              <q-input
                type="number"
                v-model.number.lazy="configObject.style.rotateZ"
                suffix="deg"
                class="suffix"
              />
            </td>
          </tr>
          <tr>
            <td>背景色</td>
            <td>
              <q-input filled v-model="configObject.style.backColor" class="my-input">
                <template v-slot:append>
                  <q-icon name="colorize" class="cursor-pointer">
                    <q-popup-proxy transition-show="scale" transition-hide="scale">
                      <q-color v-model="configObject.style.backColor" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </td>
          </tr>
          <tr v-if="configObject.style.url != undefined && configObject.style.url != null">
            <td>URL</td>
            <td>
              <q-input v-model.lazy="configObject.style.url" />
            </td>
          </tr>
          <tr v-if="configObject.type=='image'">
            <td>Title</td>
            <td>
              <q-input v-model.lazy="configObject.style.title" />
            </td>
          </tr>
          <tr v-if="configObject.style.text != undefined">
            <td>文本</td>
            <td>
              <q-input v-model.lazy="configObject.style.text" />
            </td>
          </tr>
          <tr v-if="configObject.style.textAlign != undefined">
            <td>文本对齐</td>
            <td>
              <q-select v-model="configObject.style.textAlign" :options="textAlignOptions" />
            </td>
          </tr>
          <tr>
            <td>前景色</td>
            <td>
              <q-input filled v-model="configObject.style.foreColor" class="my-input">
                <template v-slot:append>
                  <q-icon name="colorize" class="cursor-pointer">
                    <q-popup-proxy transition-show="scale" transition-hide="scale">
                      <q-color v-model="configObject.style.foreColor" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </td>
          </tr>
          <tr v-if="configObject.style.fontFamily != undefined">
            <td>字体</td>
            <td>
              <q-select v-model="configObject.style.fontFamily" :options="fontFamilyOptions" />
            </td>
          </tr>
          <tr v-if="configObject.style.fontSize != undefined">
            <td>字体大小</td>
            <td>
              <q-input
                type="number"
                suffix="px"
                class="suffix"
                v-model.number.lazy="configObject.style.fontSize"
              />
            </td>
          </tr>
          <tr v-if="configObject.style.fontSize != undefined">
            <td>字体粗细</td>
            <td>
              <q-select v-model="configObject.style.fontWeight" :options="fontWeightOptions" />
            </td>
          </tr>
          <tr v-if="configObject.style.radius != undefined">
            <td>Radius</td>
            <td>
              <q-input type="number" v-model.number.lazy="configObject.style.radius" />
            </td>
          </tr>
          <tr v-if="configObject.style.lineWidth != undefined">
            <td>线宽</td>
            <td>
              <q-input
                type="number"
                suffix="px"
                class="suffix"
                v-model.number.lazy="configObject.style.lineWidth"
              />
            </td>
          </tr>
          <tr v-if="configObject.style.setLineDash != undefined">
            <td>虚线样式(setLineDash)</td>
            <td>
              <q-input type="text" v-model.lazy="configObject.style.setLineDash" />
            </td>
          </tr>
          <tr>
            <td width="50%">code</td>
            <td width="50%">
              <q-input type="text" v-model="configObject.code" />
            </td>
          </tr>
        </table>
      </q-expansion-item>
      <div style="height:100px;"></div>
      <!-- 目前只有虚线有动画 -->
      <q-expansion-item v-if="configObject.type=='dashed'" label="动画" default-opened>
        <table class="data-tb">
          <tr>
            <td>移动方向</td>
            <td>
              <q-select v-model="configObject.style.animations" clearable :options="animations" />
            </td>
          </tr>
          <template v-if="configObject.style.animations">
            <tr>
              <td>点间隔</td>
              <td>
                <q-input
                  type="number"
                  suffix="px"
                  class="suffix"
                  v-model.number.lazy="configObject.style.dotSpace"
                />
              </td>
            </tr>
            <tr>
              <td>点宽度</td>
              <td>
                <q-input
                  type="number"
                  suffix="px"
                  class="suffix"
                  v-model.number.lazy="configObject.style.dotWidth"
                />
              </td>
            </tr>
          </template>
        </table>
      </q-expansion-item>
    </q-list>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    configObject: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      fontFamilyOptions: ['Arial', "Helvetica", "sans-serif", "宋体", "黑体", "微软雅黑"],
      textAlignOptions: ["left", "right", "center", "justify"],
      borderStyleOptions: ["solid", "dashed", "dotted"],
      fontWeightOptions: ['normal', 'bold', 'bolder', 'lighter'] //[100, 200, 300, 400, 500, 600, 700, 800, 900]
    }
  },
  computed: {
    ...mapState({
      topoData: state => state.topoEditor.topoData,
      selectedComponents: state => state.topoEditor.selectedComponents
    }),
    animations () {
      let items = [];
      if (this.configObject.type == 'dashed') {
        items = (this.configObject.direction && this.configObject.direction == 'vertical') ?
          [{ label: '向上', value: 'up' }, { label: '向下', value: 'down' }] : [{ label: '向右', value: 'right' }, { label: '向左', value: 'left' }];
      }
      return items;
    },
  }
}
</script>

<style lang="scss" scoped>
.style-tb {
  .suffix {
    padding-right: 5px;
  }
}
</style>